/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:19
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 10:34:07
* @Description: desc
*/
/*
* @Author: zhangqiaojuan
* @Description: 店铺详情
*/
<template>
	<view class="">
		<c-navigation-bar backIconColor='#fff' :navType='navObj.navType' :navThmen='navObj.navThmen'
			:backIconColor="navObj.backIconColor" :title="$t('shop.storeDetail')"></c-navigation-bar>
		<view class="container-box">
			<view class="shop-msg">
				<view class="store-card" @click="goShopInfo">
					<view class="store-card">
						<u-avatar size="112"
							:src='$u.file.getMedieUrl(storeInfo.shopAvatarUrl)'
							:show-level='true'
								:level-icon='cameraFill' 
							mode="circle"></u-avatar>
						<view class="" style="width: calc(100% - 160rpx);">
							<view style="
								color: #000;
								font-size: 14px;
								font-weight: bold;
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: normal;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							">
								{{ storeInfo.shopName }}
							</view>
							<view class="shopRate">
							

							</view>
							<view style="color: #ccc;font-size: 12px;min-width: 240rpx">
								{{`${$t('product.shopFans')} ${ storeInfo.interestNum || 0} | ${$t('product.shopSalesVolume')} ${ storeInfo.shopSalesVolume || 0}` }}
							</view>

						</view>
					</view>


				</view>

			</view>
			<u-line class="u-line" color="#ccc" :hair-line='false' margin="48rpx 0"></u-line>
			<view class="title">
				{{$t('shop.mouth')}}
			</view>
			<view class="box-border">
				<view class="">
					<view class="range">
						{{ storeInfo.mark?storeInfo.mark.toFixed(2):'0.00'}}
						<u-rate active-color="rgb(253, 161, 22)" gutter="3" size="38" :current="storeInfo.mark" :disabled="true"
							style="margin: 0 10rpx;"></u-rate>
					</view>
					<view class="tips">
						{{$t('shop.mouthTips')}}
					</view>
					<view class="row">
						<view class="rowTitle">
							{{$t('shop.ProductExperience')}}
						</view>
						<view class="progress">
							<view class="progress-bar" :style="{'width':`${(shopScore.productScore/5)*100}%`}">
							</view>
						</view>
						<view class="rowRange">
							{{shopScore.productScore}}
						</view>
						<view class="rowMes">
							{{$t('shop.AbovePeers')}}{{shopScore.productScoreExceed}}%
						</view>
					</view>
					<view class="row">
						<view class="rowTitle">
							{{$t('shop.LogisticsExperience')}}
						</view>
						<view class="progress">
							<view class="progress-bar" :style="{'width':`${(shopScore.logisticsScore/5)*100}%`}">
							</view>
						</view>
						<view class="rowRange">
							{{shopScore.logisticsScore}}
						</view>
						<view class="rowMes">
							{{$t('shop.AbovePeers')}}{{shopScore.logisticsScoreExceed}}%
						</view>
					</view>
					<view class="row">
						<view class="rowTitle">
							{{$t('shop.After-salesExperience')}}
						</view>
						<view class="progress">
							<view class="progress-bar" :style="{'width':`${(shopScore.afterSaleScore/5)*100}%`}">
							</view>
						</view>
						<view class="rowRange">
							{{shopScore.afterSaleScore}}
						</view>
						<view class="rowMes">
							{{$t('shop.AbovePeers')}}{{shopScore.afterSaleScoreExceed}}%
						</view>
					</view>
					<view class="row">
						<view class="rowTitle">
							{{$t('shop.ConsultingExperience')}}
						</view>
						<view class="progress">
							<view class="progress-bar" :style="{'width':`${(shopScore.consultScore/5)*100}%`}">
							</view>
						</view>
						<view class="rowRange">
						{{shopScore.consultScore}}
						</view>
						<view class="rowMes">
							{{$t('shop.AbovePeers')}}{{shopScore.consultScoreExceed}}%
						</view>
					</view>

				
				</view>


			</view>
		
			<view class="title">
				{{$t('shop.publicity')}}
			</view>
			<view class="box-border" style="color: rgba(182, 182, 182, 1);font-size: 10px;height: 276rpx;">
				{{storeInfo.profile}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				//nav
				navObj: {
					navThmen: 'line',
					navType: 'navBackTitle',
					backIconColor: "#1B1D29"
				},
				storeInfo: {},
				shopScore: {},
				cameraFill: require('static/images/icon-avator-home.png'),
			}
		},
		onLoad(obj) {
			this.$u.get('/app/shop/get/' + obj.shopId).then(res => {
				this.storeInfo = res.data
				this.$u.get('/app/shop-level/' + res.data.shopLevelId).then((res) => {
						this.cameraFill = this.$u.file.getMedieUrl(res.data.icon)
					});
			})
			this.$u.get('app/shopScore/queryMark/' + obj.shopId).then(res => {
				this.shopScore = res.data
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container-box {
		padding-bottom: 120rpx;
	}
	/deep/ .u-avatar__level {
			.u-icon__img {
				width: 26px !important;
			}
		}
	.shop-msg {
		margin: 0 10rpx;

		.store-card {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				text {
					font-size: 28rpx;
					color: #1b1d29;
				}
			}
		}

	}

	.title {
		color: rgba(23, 23, 23, 1);
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}

	.shopRate {
		display: flex;
		align-items: center;
		margin: 10rpx 0;

		.shopRateName {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 18rpx;
			width: 80rpx;
			height: 38rpx;
			border-radius: 4rpx;
			border: 1rpx solid rgba(189, 188, 199, 1);
			box-sizing: border-box;
			background: rgba(252, 250, 254, 1);
			line-height: 34rpx;
			text-align: center;
		}


	}

	.box-border {
		padding: 40rpx;
		border-radius: 8px;
		background: rgba(242, 242, 242, 1);
		border-radius: 26rpx;
		margin-bottom: 48rpx;

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.rowTitle {
				color: rgba(23, 23, 23, 1);
				font-family: PingFang SC;
				font-weight: 500;
				margin-right: 8rpx;
				font-size: 28rpx;
				width: 150rpx;
			}

			.progress {
				width: 140rpx;
				height: 24rpx;
				border-radius: 32rpx;
				margin: 0 16rpx;
				background: rgba(230, 230, 230, 1);

				.progress-bar {
					height: 24rpx;
					border-radius: 32rpx;
					background: linear-gradient(90deg, rgba(198, 233, 77, 1) 0%, rgba(239, 218, 73, 1) 26.22%, rgba(240, 156, 58, 1) 57.06%, rgba(240, 156, 58, 1) 98.71%, rgba(235, 115, 48, 1) 98.71%);
				}
			}

			.rowRange {
				font-weight: 500;
				font-size: 28rpx;
				margin-right: 8rpx;
				color: rgba(253, 161, 22, 1);
			}

			.rowMes {
				color: rgba(253, 161, 22, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
			}
		}

		.range {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
		}

		.tips {
			color: rgba(182, 182, 182, 1);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 10px;
			padding: 0 0 40rpx;
			margin: 20rpx 0 40rpx;
			border-bottom: 1px solid rgba(182, 182, 182, 1);
		}

	}

</style>